<%@page import="es.usj.tac.meteorologica.dto.Weather"%>
<%@page import="es.usj.tac.meteorologica.dao.DAOFactory"%>
<%@page import="es.usj.tac.meteorologica.dto.City"%>
<%@page import="es.usj.tac.meteorologica.dto.Country"%>
<%@page import="java.util.List"%>
<%@page import="es.usj.tac.meteorologica.controller.WSDatabase"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"  %>
<%WSDatabase db = new WSDatabase();
if(request.getParameter("country") != null){
	City[] cities = db.listCitiesByCountry(Integer.parseInt(request.getParameter("country")));
	for(int i=0;i<cities.length;i++){%>
		<option value="<%=cities[i].getName() %>"><%= cities[i].getName() %></option>
	<%}
}else{ 
	if(request.getParameter("cityHistoricos") != null){
		Weather[] weathers = db.listHistoricalForCity(request.getParameter("cityHistoricos"));%>
		<table summary="Listado del tiempo para una ciudad" class="results">
			
			<tbody>
				<tr>	
					
					<td class="titleCell">D&iacute;a</td>
					<td class="titleCell">Visibilidad</td>
					<td class="titleCell">Viento</td>
					<td class="titleCell">Temperatura (F)</td>
					<td class="titleCell">Temperatura (C)</td>
					<td class="titleCell">Dew Point (F)</td>
					<td class="titleCell">Dew Point (C)</td>
					<td class="titleCell">Humedad Relativa</td>
					<td class="titleCell">Presi&oacute;n</td>
					<td class="titleCell">Estado</td>
				</tr>
				<%for(int i=0; i<weathers.length;i++){
					Weather weather = weathers[i];
					request.setAttribute("weather", weather);
				%>
					<tr>
							<td><c:out value="${weather.time}"/></td>
							<td><c:out value="${weather.visibility}"/></td>
							<td><c:out value="${weather.wind}"/></td>
							<td><c:out value="${weather.temperatureInF}"/></td>
							<td><c:out value="${weather.temperatureInC}"/></td>
							<td><c:out value="${weather.dewPointInF}"/></td>
							<td><c:out value="${weather.dewPointInC}"/></td>
							<td><c:out value="${weather.relativeHumidity}"/>%</td>
							<td><c:out value="${weather.pressure}"/></td>
							<td>
								<c:choose>
									<c:when test="${weather.status==true}"><img src="jsp/images/tick.png" alt="OK"/></c:when>
									<c:otherwise><img src="jsp/images/delete.png" alt="KO"/></c:otherwise>
								</c:choose>
							</td>
						</tr>				
				<%} %>
			<tr>
			</tr>
			</tbody>
			
		</table>
	<%}else{%>
	
		<script type="text/javascript">
		$(document).ready(function(){
			$('#countriesHistoricos').change(function(){
				var id = $(this).find(':selected').val();
				
				$.ajax({
					type : 'GET',
					dataType : "html",
					url : 'jsp/historicos.jsp?country='+id,
					complete : function(objeto, exito) { 
						if('success' == exito)
							$('#cityHistoricos').html(objeto.responseText);
						
					}
				});
			});
			$('#consultar').click(function(){
				var id = $('#cityHistoricos').find(':selected').val();
				$.ajax({
					type : 'GET',
					dataType : "html",
					url : 'jsp/historicos.jsp?cityHistoricos='+id,
					complete : function(objeto, exito) { 
						if('success' == exito)
							$('#historicalZone').html(objeto.responseText);
						
					}
				});
			});
		});
		</script>
		<div class="formHistorical">
			<div class="lineForm2">
				<label for="countries">Seleccione un pa&iacute;s</label>
				<select name="countriesHistoricos" id="countriesHistoricos">
					<option value="0">---Seleccione una opci&oacute;n--</option>
					<%
						Country[] countries = db.listAllCountries();
						for(int i=0;i<countries.length;i++){
						Country country = countries[i];
						request.setAttribute("country", country);%>
							<option value="<c:out value="${country.id}"/>"><c:out value="${country.name}"/></option>
						<%}
					%>
				</select>
			</div>
			<div class="lineForm2">
				<label for="countries">Seleccione una ciudad</label>
				
				<select name="cityHistoricos" id="cityHistoricos">
				
				</select>
				</div>
			<div class="lineForm2"><button id="consultar">Consultar</button></div>
		</div>
		<div id="historicalZone"></div>
	<%
	}
}%>